@extends('admin.common.main')
@section('header')
    <link rel="stylesheet" type="text/css" href="/webuploader-0.1.5/webuploader.css">
@endsection

@section('content')
    @include('admin.common.error'){{--如果出现错误--}}
      <article>
          <form action="{{ route('admin.fang.store') }}" method="post" class="form form-horizontal" id="fang-add">
              @csrf
              <div class="row cl">
                  <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>房源名称：</label>
                  <div class="formControls col-xs-8 col-sm-9">
                      <input type="text" class="input-text" name="fang_name">
                  </div>
              </div>
              <div class="row cl">
                  <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>小区名称：</label>
                  <div class="formControls col-xs-8 col-sm-9">
                      <input type="text" class="input-text" name="fang_xiaoqu">
                  </div>
              </div>
              <div class="row cl">
                  <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>小区地址：</label>
                  <div class="formControls col-xs-4 col-sm-4">
                      {{-- 三级联动 设定 内容改变事件 --}}
                      <select name="fang_province" style="width: 100px;" onchange="chang_city(this,'fang_city')">
                          <option value="0">==请选择省==</option>
                          @foreach($cityData as $val)
                              <option value="{{$val['id']}}">{{$val['name']}}</option>
                          @endforeach
                      </select>
                      <select name="fang_city" id="fang_city" style="width: 100px;" onchange="chang_city(this,'fang_region')">

                          <option value="0">==市==</option>
                      </select>
                      <select name="fang_region" id="fang_region" style="width: 100px;">
                          <option value="0">==区/县==</option>
                      </select>
                  </div>
                  <div class="formControls col-xs-4 col-sm-5">
                      <input type="text" class="input-text" name="fang_addr" placeholder="小区详情地址和房源说明">
                  </div>
              </div>
              <div class="row cl">
                  <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>租金：</label>
                  <div class="formControls col-xs-8 col-sm-9">
                      <input type="number" class="input-text" style="width: 200px;" name="fang_rent"> 元
                  </div>
              </div>
              <div class="row cl">
                  <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>楼层：</label>
                  <div class="formControls col-xs-8 col-sm-9">
                      <input type="number" class="input-text" style="width: 200px;" name="fang_floor">
                  </div>
              </div>
              <div class="row cl">
                  <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>租期方式：</label>
                  <div class="formControls col-xs-8 col-sm-9">
                      <select name="fang_rent_type" style="width: 200px;">
                            @foreach($fangRentTypeData as $val)
                              <option value="{{$val['id']}}">{{$val['name']}}</option>
                          @endforeach
                      </select>
                  </div>
              </div>
              <div class="row cl">
                  <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>几室：</label>
                  <div class="formControls col-xs-8 col-sm-9">
                      <input type="number" class="input-text" name="fang_shi" value="2">
                  </div>
              </div>
              <div class="row cl">
                  <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>几厅：</label>
                  <div class="formControls col-xs-8 col-sm-9">
                      <input type="number" class="input-text" name="fang_ting" value="1">
                  </div>
              </div>
              <div class="row cl">
                  <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>几卫：</label>
                  <div class="formControls col-xs-8 col-sm-9">
                      <input type="number" class="input-text" name="fang_wei" value="2">
                  </div>
              </div>
              <div class="row cl">
                  <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>朝向：</label>
                  <div class="formControls col-xs-8 col-sm-9">
                      <select name="fang_direction" style="width: 200px;">
                          @foreach($fangDirectionData as $val)
                              <option value="{{$val['id']}}">{{$val['name']}}</option>
                          @endforeach
                      </select>
                  </div>
              </div>
              <div class="row cl">
                  <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>租赁方式：</label>
                  <div class="formControls col-xs-8 col-sm-9">
                      <select name="fang_rent_class" style="width: 200px;">
                          @foreach($fangRentClassData as $val)
                              <option value="{{$val['id']}}">{{$val['name']}}</option>
                          @endforeach
                      </select>
                  </div>
              </div>
              <div class="row cl">
                  <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>建筑面积：</label>
                  <div class="formControls col-xs-8 col-sm-9">
                      <input type="number" class="input-text" name="fang_build_area" value="120" style="width: 60px;">平米
                  </div>
              </div>
              <div class="row cl">
                  <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>使用面积：</label>
                  <div class="formControlsq col-xs-8 col-sm-9">
                      <input type="number" class="input-text" name="fang_using_area" value="105" style="width: 60px;">平米
                  </div>
              </div>
              <div class="row cl">
                  <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>建筑年代：</label>
                  <div class="formControls col-xs-8 col-sm-9">
                      <input type="text" onfocus="WdatePicker({dateFmt:'yyyy'})" name="fang_year" class="input-text Wdate"
                             style="width:120px;">
                  </div>
              </div>
              <div class="row cl">
                  <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>配套设施：</label>
                  <div class="formControls col-xs-8 col-sm-9">
                      @foreach($fangConfigData as $val)
                          <input type="checkbox" value="{{$val['id']}}" name="fang_config[]"  >{{$val['name']}}
                      @endforeach
                  </div>
              </div>
              <div class="row cl">
                  <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>房屋图片：</label>
                  <div class="formControls col-xs-2 col-sm-2">
                      <div id="picker">房屋图片</div>
                  </div>
                  <div class="formControls col-xs-6 col-sm-7">
                      <!-- 表单提交时，上传图片地址，以#隔开 -->
                      <input type="hidden" name="fang_pic" id="fang_pic"/>
                      <!-- 显示上传成功后的图片容器 -->
                      <div id="imgList"></div>
                  </div>
              </div>
              <div class="row cl">
                  <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>房东：</label>
                  <div class="formControls col-xs-8 col-sm-9">
                      <select name="fang_owner" style="width: 200px;">
                          @foreach($fangownerData as $val)
                              <option value="{{$val['id']}}">{{$val['name']}}</option>
                          @endforeach
                      </select>
                  </div>
              </div>
              <div class="row cl">
                  <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>是否推荐：</label>
                  <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                      <div class="radio-box">
                          <label>
                              <input name="is_recommend" type="radio" value="0" checked>
                              否
                          </label>
                      </div>
                      <div class="radio-box">
                          <label>
                              <input type="radio" value="1" name="is_recommend">
                              是
                          </label>
                      </div>
                  </div>
              </div>
              <div class="row cl">
                  <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>房屋描述：</label>
                  <div class="formControls col-xs-8 col-sm-9">
                      <textarea name="fang_desn" class="form-control textarea"></textarea>
                  </div>
              </div>
              <div class="row cl">
                  <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>房屋详情：</label>
                  <div class="formControls col-xs-8 col-sm-9">
                      <textarea id="fang_body" name="fang_body">房屋详情信息添加</textarea>
                  </div>
              </div>
              <div class="row cl">
                  <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                      <input class="btn btn-primary radius" type="submit" value="添加房源">
                  </div>
              </div>

              <input type="hidden" value="0" name="fang_status">
          </form>

      </article>

@endsection



@section('js')
    <script type="text/javascript" src="/admin/lib/My97DatePicker/4.8/WdatePicker.js"></script>
    <script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
    <script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/validate-methods.js"></script>
    <script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>
    <!--引入JS-->
    <script type="text/javascript" src="/webuploader-0.1.5/webuploader.js"></script>

    <script type="text/javascript" charset="utf-8" src="/ueditor_4.3/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/ueditor_4.3/ueditor.all.min.js"> </script>
    <script type="text/javascript">

        var ue = UE.getEditor('fang_body');

        /*   分片上传 没有写后端的*/
        var uploader = WebUploader.create({
            auto: true,
            // 本地 swf文件路径
            swf:"/webuploader-0.1.5/js/Uploader.swf'",
            formData:{_token:"{{csrf_token()}}" },
            // 文件接收服务端。
            server: "{{route('admin.fang.localUploadFile')}}",
            threads: 4,
            chunked:true, // [默认值：false] 是否要分片处理大文件上传。
            chunkSize:2*1024*1024,// 设置为1M {Boolean} [可选] [默认值：5242880] 如果要分片，分多大一片？ 默认大小为5M.
            chunkRetry: 3 ,//[可选] [默认值：2] 如果某个分片由于网络问题出错，允许自动重传多少次？


            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#picker',

            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false
        });
        /*
        多文件上传 重要的市前端的数据渲染
        图片追加
        Val 获取后 拼接 在赋值
         */
        uploader.on( 'uploadSuccess', function( file,ret ) {
            console.log(ret)
            //图片路径 并追加渲染
            let loaclImg=`
            <div style="position: relative;width:100px; display: inline-block">
            <img src="${ret.data.file}" width="100"/>
            <strong onclick="delpic(this,'${ret.data.file}')" style="position: absolute;right: 2px;top:2px; color: yellow;font-size: 15px;">x</strong>
            </div>   `;
            $('#imgList').append(loaclImg);

            //获取当前输入框的值，在给字符串值追加新增的内容  然后返回值
            var picVal =  $('#fang_pic').val();
            var picVal =picVal + "#" + ret.data.file;
            $('#fang_pic').val(picVal)
        });
        /*
        当点击删除时
        先删除当前文件
        然后删除对应的 input 值
        最后传入后台 删除文件
         */
        function delpic(ret,pic) {

            $(ret).parent().remove();

            var picVal =  $('#fang_pic').val()
            //将传入内容替换为空字符串
            var res= picVal.replace(`#${fang_pic}`,"")
            //传回内容
            $('#fang_pic').val(res)


            $.ajax({
                type:"DELETE",
                url:"{{route('admin.fang.delPic')}}",
                data:{pic,_token:"{{csrf_token()}}"},
                success:res=>{


                    console.log();
                }


            })
            return false

        }


        /**
         * 多级联动
         */
        function chang_city(ret,cityItme) {
            var id= $(ret).val()
            //动省 后 三级内容依然在 进行清空
            $('#fang_region').html(` <option value="0">==区/县==</option>`)


           $.ajax({
               url:"{{route('admin.getCityDataById')}}?id="+id,
               type: 'get',
               success:res=>{

                   let cityData =res.data;
                   let html = `<option value="0">==请选择==</option>`

                   // 此处为 js 原生的 map 方法
                   cityData.map(function (item) {
                       html +=  `<option value="${item.id}">${item.name}</option>`
                   })

                      //JQ map 写法
                  /* $.map(cityData,function (item) {
                       html +=  `<option value="${item.id}">${item.name}</option>`
                   })  */

                   //将下一级内容进行替换
                   $(`#${cityItme}`).html(html)

               }

           })

        }
    </script>


@endsection
